<template>
  <Teleport to="#app">
    <div class="bre-modal brea-link-modal" v-if="props.modelValue">
      <div class="bre-modal__wrap" style="width: 500px; top: 30%">
        <div class="bre-modal__header">
          <p>
            <slot name="title">{{ title }}</slot>
          </p>
          <div class="bre-modal__close" @click="handleClose">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M4.92768 4.93029C5.22057 4.6374 5.69544 4.6374 5.98834 4.93029L11.9986 10.9405L18.0104 4.92865C18.3033 4.63576 18.7782 4.63576 19.0711 4.92865C19.364 5.22155 19.364 5.69642 19.0711 5.98931L13.0592 12.0012L19.0698 18.0118C19.3627 18.3047 19.3627 18.7795 19.0698 19.0724C18.7769 19.3653 18.302 19.3653 18.0092 19.0724L11.9986 13.0618L5.98963 19.0708C5.69674 19.3637 5.22187 19.3637 4.92897 19.0708C4.63608 18.7779 4.63608 18.303 4.92897 18.0101L10.9379 12.0012L4.92768 5.99095C4.63478 5.69806 4.63478 5.22319 4.92768 4.93029Z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </div>
        <div class="bre-modal__content">
          <slot></slot>
        </div>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'

const props = withDefaults(
  defineProps<{ modelValue: boolean; title: string }>(),
  { modelValue: false, title: '' }
)
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>
<style lang="scss" scoped></style>
